<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>河北省交通运输综合执法监督局</title>
	<!--设置是否为缩放模式 -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- 新 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" type="text/css" href="https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
	<link rel="icon" type="image/png" href="images/iconTitle.jpg">
	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src="js/jquery.min.js"></script>
	<script src="js/jquery.liMarquee.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="js/bootstrap.min.js"></script>
	<!--echarts JS-->
	<script src="js/echarts.min.js"></script>
	<!-- 轮播swiper文件 -->
	<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
	<script src="js/swiper.min.js"></script>
	<!--界面样式-->
	<script src="js/visual1.js"></script>
	<script src="js/china.js"></script>
	<script src="js/chartMap1.js"></script>
	<script src="js/moment.min.js"></script>
	<script src="js/mapMarker.js"></script>
	<script src="js/lodash-4.17.15.min.js"></script>
	<script src="js/mapMarker.js"></script>
	<link rel="stylesheet" type="text/css" href="css/visual1.css">
	<link rel="stylesheet" type="text/css" href="css/flex.css">
	<link rel="stylesheet" type="text/css" href="css/visual_right.css">
	<link rel="stylesheet" type="text/css" href="css/visual_mapborder.css">

</head>

<body class="ksh">
	<div id="load">
		<div class="load_img"><!-- 加载动画 -->
			<img class="jzxz1" src="images/jzxz1.png">
			<img class="jzxz2" src="images/jzxz2.png">
		</div>
	</div>
	<div class="head_top" style="text-align: center; display: flex; justify-content: space-between;background:url('images/top44.png') repeat left;height:100px;background-repeat: no-repeat;background-size: 100%;z-index: 9999">
		<div style="color: #ffffff; font-size: 16px;height:70px;padding-left:15px;text-align: center;display: flex; align-items: center;"><span style="color: #00ffc6; font-size: 16px;">石家庄</span> <img alt="" src="images/qing.png" style="width:20px;height:20px;margin:0 10px;" />18℃ - 29℃</div>
		<!-- <div style="display: flex; justify-content: space-around; width: 100vw;">
			<div style="display: flex; align-items: center;height:80px;">
					<button class="top-btn">指挥调度</button>
					<button class="top-btn">数据管理</button>
					<button class="top-btn">装备管理</button>
			</div>

					<img class="img-responsive" style="height: 50px;width: 500px;" src="images/title_icon.jpg">

			<div style="display: flex; align-items: center;">
				<button style="background-color: #133565; color: #ffffff; font-size: 18px;padding: 8px 16px; margin-right: 20px; border-color:#1380bd;">设备运维</button>
					<button style="background-color: #133565; color: #ffffff; font-size: 18px;padding: 8px 16px; margin-right: 20px; border-color:#1380bd;">统计分析 </button>
					<button style="background-color: #133565; color: #ffffff; font-size: 18px;padding: 8px 16px; border-color:#1380bd;">数字孪生</button>
			</div>
		</div> -->
		<div style="color: #ffffff; font-size: 16px;height:70px;padding-right:15px;text-align: center;display: flex; align-items: center;" id="rightTime" >2024/05/18 17:29:12</div>
	</div>
<!--	<div class="head_top" style="background-image: url('images/top.png');background-size: cover;">-->
<!--		<div class="head_left_right" style="width: 220px;"><span style="color: #00ffc6; font-size: 16px;">石家庄</span>-->
<!--			<img alt="" src="images/qing.png" style="width:20px;height:20px;margin:0 10px;" />18℃ - 29℃-->
<!--		</div>-->
<!--		<div class="flexCenter" style="width: 130vw; justify-content: space-between;">-->
<!--			<div style="width: 30%; display: flex; justify-content: flex-end;align-self: flex-start; margin-top: 5px;">-->
<!--				<div class="topToolLA">-->
<!--					<div class="topToolL flexCenter">-->
<!--						<span>挥调度</span>-->
<!--					</div>-->
<!--				</div>-->
<!--				<div class="topToolLA">-->
<!--					<div class="topToolL flexCenter">-->
<!--						<span>数据管理</span>-->
<!--					</div>-->
<!--				</div>-->
<!--				<div class="topToolLA">-->
<!--					<div class="topToolL flexCenter">-->
<!--						<span>装备管理</span>-->
<!--					</div>-->
<!--				</div>-->
<!--			</div>-->
<!--			<img src="./images/title_icon.jpg" />-->
<!--			<div style="width:30%; display: flex; justify-content: flex-start;align-self: flex-start; margin-top: 5px;">-->
<!--				<div class="topToolRA">-->
<!--					<div class="topToolR flexCenter">-->
<!--						<span>设备运维</span>-->
<!--					</div>-->
<!--				</div>-->
<!--				<div class="topToolRA">-->
<!--					<div class="topToolR flexCenter">-->
<!--						<span>统计分析</span>-->
<!--					</div>-->
<!--				</div>-->
<!--				<div class="topToolRA">-->
<!--					<div class="topToolR flexCenter">-->
<!--						<span>数字孪生</span>-->
<!--					</div>-->
<!--				</div>-->
<!--			</div>-->
<!--		</div>-->
<!--		<div class="head_left_right" style="width: 220px;" id="rightTime">2024/05/18 17:29:12</div>-->
<!--	</div>-->
	<div class="visual">
		<div class="visual_left" style="padding:0 15px;">
			<div class="visual_box">
				<div class="visual_title">
					<span>装备信息</span>
					<img src="images/ksh33.png">
				</div>
				<div class="swiper-container visual_swiper1 visual_chart">
					<div class="swiper-wrapper">
						<div class="zbTotal"> 总数：<span style="color: #33bbd2;">1582</span> 在线率：<span
								style="color: #33bbd2;">94.94%</span></div>
						<div class="zbleft">
							<div class="visualSssf_right_box" id="main5"></div>
							<div class="box_text">
								<li>95.80%</li>
								<li>786 / <span style="color: #ffffff;">820台</span></li>
							</div>
							<div class="visualSssf_right_box" id="main6"></div>
							<div class="box_text2">
								<li>97.90%</li>
								<li>510 / <span style="color: #ffffff;">521台</span></li>
							</div>
							<div class="visualSssf_right_box" id="main7"></div>
							<div class="box_text3">
								<li>87.10%</li>
								<li>131 / <span style="color: #ffffff;">150台</span></li>
							</div>
							<div class="visualSssf_right_box" id="main21"></div>
							<div class="box_text4">
								<li>82.11%</li>
								<li>75 / <span style="color: #ffffff;">91台</span></li>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="visual_box">
				<div class="visual_title">
					<span>执法装备</span>
					<img src="images/ksh33.png">
				</div>
				<div class="visual_chart" id="main2">

				</div>
			</div>
			<div class="visual_box">
				<div class="visual_title">
					<span>实时在线</span>
					<img src="images/ksh33.png">
				</div>
				<div class="swiper-container visual_swiper2">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<div class="listnav">
								<ul class="content1">
									<li>
										<span
											style="border-radius: 50%;width: 10px;height: 10px;background-color: #01c0ff;"></span>
										<span>2024-5-18 11:50:17</span>
										<span>石家庄支队藁城大队</span>
										<span>张三(执法记录仪)已上线</span>
									</li>
									<li>
										<span
											style="border-radius: 50%;width: 10px;height: 10px;background-color: #01c0ff;"></span>
										<span>2024-5-18 11:50:18</span>
										<span>石家庄支队藁城大队</span>
										<span>王五(执法记录仪)已上线</span>
									</li>
									<li>
										<span
											style="border-radius: 50%;width: 10px;height: 10px;background-color: #01c0ff;"></span>
										<span>2024-5-18 11:50:19 </span>
										<span>石家庄支队藁城大队</span>
										<span>李四(执法记录仪)已离线</span>
									</li>
									<li>
										<span
											style="border-radius: 50%;width: 10px;height: 10px;background-color: #01c0ff;"></span>
										<span>2024-5-18 12:01:19 </span>
										<span>石家庄支队藁城大队</span>
										<span>李四(执法记录仪)已上线</span>
									</li>
									<li>
										<span
											style="border-radius: 50%;width: 10px;height: 10px;background-color: #01c0ff;"></span>
										<span>2024-5-18 13:20:18</span>
										<span>石家庄支队藁城大队</span>
										<span>王五(执法记录仪)已离线</span>
									</li>
									<li>
										<span
											style="border-radius: 50%;width: 10px;height: 10px;background-color: #01c0ff;"></span>
										<span>2024-5-19 12:01:19 </span>
										<span>石家庄支队藁城大队</span>
										<span>李四(执法记录仪)已上线</span>
									</li>
									<li>
										<span
											style="border-radius: 50%;width: 10px;height: 10px;background-color: #01c0ff;"></span>
										<span>2024-5-19 12:01:19 </span>
										<span>石家庄支队藁城大队</span>
										<span>李四(执法记录仪)已上线</span>
									</li>
									<li>
										<span
											style="border-radius: 50%;width: 10px;height: 10px;background-color: #01c0ff;"></span>
										<span>2024-5-19 12:01:19 </span>
										<span>石家庄支队藁城大队</span>
										<span>李四(执法记录仪)已上线</span>
									</li>
									<li>
										<span
											style="border-radius: 50%;width: 10px;height: 10px;background-color: #01c0ff;"></span>
										<span>2024-5-19 12:01:19 </span>
										<span>石家庄支队藁城大队</span>
										<span>李四(执法记录仪)已上线</span>
									</li>
									<li>
										<span
											style="border-radius: 50%;width: 10px;height: 10px;background-color: #01c0ff;"></span>
										<span>2024-5-18 12:01:19 </span>
										<span>石家庄支队藁城大队</span>
										<span>李四(执法记录仪)已上线</span>
									</li>
									<li>
										<span
											style="border-radius: 50%;width: 10px;height: 10px;background-color: #01c0ff;"></span>
										<span>2024-5-18 12:01:19 </span>
										<span>石家庄支队藁城大队</span>
										<span>李四(执法记录仪)已上线</span>
									</li>
									<li>
										<span
											style="border-radius: 50%;width: 10px;height: 10px;background-color: #01c0ff;"></span>
										<span>2024-5-18 12:01:19 </span>
										<span>石家庄支队藁城大队</span>
										<span>李四(执法记录仪)已上线</span>
									</li>
								</ul>
							</div>
						</div>


					</div>
				</div>
			</div>
		</div>
		<div class="visual_left" style="padding-left: 15px;">
			<div class="visual_box">
				<div class="visual_title">
					<span>紧急报警</span>
					<img src="images/ksh33.png">
				</div>
				<div class="visual_chart sfzcll">
					<a>报警人</a>
					<a>报警位置</a>
					<a>报警内容</a>
					<div class="sfzcll_pos_box">
						<div class="sfzcll_box">
							<img class="sfzcll_bkJk" src="images/ksh34.png">
							<img class="sfzcll_bkJk" src="images/ksh34.png">
							<img class="sfzcll_bkJk" src="images/ksh34.png">
							<img class="sfzcll_bkJk" src="images/ksh34.png">
							<label>张三（藁城大队）</label>
							<div class="sfzcll_smallBk">
								<div class="ygl">
									<span>石家庄裕华区</span>
								</div>
							</div>
							<div class="sfzcll_smallBk">
								<div class="ygh">
									<span>执法有肢体接触</span>
								</div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="sfzcll_box">
							<img class="sfzcll_bkJk" src="images/ksh34.png">
							<img class="sfzcll_bkJk" src="images/ksh34.png">
							<img class="sfzcll_bkJk" src="images/ksh34.png">
							<img class="sfzcll_bkJk" src="images/ksh34.png">
							<label>李四（新乐大队）</label>
							<div class="sfzcll_smallBk">
								<div class="ygl">
									<span>石家庄长安区</span>
								</div>
							</div>
							<div class="sfzcll_smallBk">
								<div class="ygh">
									<span>执法术语不规范</span>
								</div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="sfzcll_box">
							<img class="sfzcll_bkJk" src="images/ksh34.png">
							<img class="sfzcll_bkJk" src="images/ksh34.png">
							<img class="sfzcll_bkJk" src="images/ksh34.png">
							<img class="sfzcll_bkJk" src="images/ksh34.png">
							<label>王五（鹿泉大队）</label>
							<div class="sfzcll_smallBk">
								<div class="ygl">
									<span>石家庄鹿泉区</span>
								</div>
							</div>
							<div class="sfzcll_smallBk">
								<div class="ygh">
									<span>可疑车辆</span>
								</div>
							</div>
							<div class="clear"></div>
						</div>
					</div>

				</div>
			</div>
			<div class="visual_box">
				<div class="visual_title">
					<span>执法装备分布</span>
					<img src="images/ksh33.png">
				</div>
				<div class="visual_chart" id="main9">

				</div>
			</div>
			<!--			<div class="visual_box">-->
			<!--				<div class="visual_title">-->
			<!--					<span>案件数量</span>-->
			<!--					<img src="images/ksh33.png">-->
			<!--				</div>-->
			<!--				<div class="visual_chart visual_chart_end" id="main10">-->

			<!--				</div>-->
			<!--			</div>-->
			<div class="visual_box" style="color:#fff">
				<div class="visual_title">
					<span>装备故障</span>
					<img src="images/ksh33.png">
				</div>
				<div class="swiper-container visual_swiper1 visual_chart">
					<div class="swiper-wrapper">
						<div class="zbTotal"> 故障数量: <span style="color: #33bbd2;">5</div>
						<div class="zbright">
							<li class="rightLi">
								<img style="position: relative;top: -8px" src="images/zbicon.png"></icon>
								<div class="bzlist">
									<div style="padding-bottom: 8px">对讲机</div>
									<div><button>待处置</button></div>
								</div>
								<div class="bzinfo">
									<div style="padding-bottom: 8px"><span
											style="color: #4e5667; font-weight: bold;font-size: 15px;">
											装备信息：</span>张三(石家庄支队草城大队)</div>
									<div><span
											style="color: #4e5667; font-weight: bold;font-size: 15px;">上报时间：</span>2024-5-18
										15:09:01</div>
								</div>
							</li>
							<li class="rightLi"><img style="position: relative;top: -8px" src="images/zbicon2.png">
								</icon>
								<div class="bzlist">
									<div style="padding-bottom: 8px">执法记录仪</div>
									<div><button>待处置</button></div>
								</div>
								<div class="bzinfo">
									<div style="padding-bottom: 8px"><span
											style="color: #4e5667; font-weight: bold;font-size: 15px;">装备信息：</span>李四(石家庄支队新乐大队)
									</div>
									<div><span
											style="color: #4e5667; font-weight: bold;font-size: 15px;">上报时间：</span>2024-5-18
										15:09:01</div>
								</div>
							</li>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="visual_con">
			<div class="visual_conTop">
				<div class="visual_conTop_box visual_conTop1">
					<div>
						<h3>当前警情数(起)</h3>
						<p>67</p>
						<div class="conTop_smil">
							<a class="sz">日环比:<span>+3%</span><i class="fa fa-long-arrow-up"></i></a>
							<a class="xd">周环比:<span>-2%</span><i class="fa fa-long-arrow-down"></i></a>
						</div>
					</div>
				</div>
				<div class="visual_conTop_box visual_conTop2">
					<div>
						<h3>区域拥堵指数</h3>
						<p>1.4</p>
						<div class="conTop_smil">
							<a class="">缓行</a>
							<a class="">平均车速<span>120</span>KM/H</i></a>
						</div>
					</div>
				</div>
				<div class="visual_conTop_box visual_conTop1">
					<div>
						<h3>当前警情数(起)</h3>
						<p>99</p>
						<div class="conTop_smil">
							<a class="sz">日环比:<span>+3%</span><i class="fa fa-long-arrow-up"></i></a>
							<a class="xd">周环比:<span>-2%</span><i class="fa fa-long-arrow-down"></i></a>
						</div>
					</div>
				</div>
				<div class="visual_conTop_box visual_conTop2">
					<div>
						<h3>当前警情数(起)</h3>
						<p>7421</p>
						<div class="conTop_smil">
							<a class="null">null</a>
							<a class="xd">月环比:<span>-2%</span><i class="fa fa-long-arrow-down"></i></a>
						</div>
					</div>
				</div>
				<div class="clear"></div>
			</div>
			<div class="visual_conBot">
				<img class="visual_conBot_l" src="images/ksh42.png">
				<img class="visual_conBot_2" src="images/ksh43.png">
				<img class="visual_conBot_3" src="images/ksh44.png">
				<img class="visual_conBot_4" src="images/ksh45.png">
				<div class="visual_bottomBox">
					<div class="box_buttom">
						<button id="typeBtn" class="highBtn" onclick="typeCheck(true)">数据交互地图</button>
					</div>
					<div class="box_buttom">
						<button id="check2D" onclick="checke2D()">2D地图</button>
					</div>
					<div class="box_buttom">
						<button id="check3D" onclick="checke3D()">3D地图</button>
					</div>
					<label class="box_checkbox" style="margin-top: 35px;">
						<input id="checkjly" class="toggle-trigger" type="checkbox" onclick="onCheckMarker()"
							$datatype="1" />
						<div class="toggle-item"></div>
						<span class="label-style">执法记录仪</span>
					</label>
					<label class="box_checkbox">
						<input id="checkdjj" class="toggle-trigger" type="checkbox" onclick="onCheckMarker()"
							$datatype="2" />
						<div class="toggle-item"></div>
						<span class="label-style">对讲机</span>
					</label>
					<label class="box_checkbox">
						<input id="checkczjk" class="toggle-trigger" type="checkbox" onclick="onCheckMarker()"
							$datatype="3" />
						<div class="toggle-item"></div>
						<span class="label-style">车载监控</span>
					</label>
					<label class="box_checkbox">
						<input id="checksczf" class="toggle-trigger" type="checkbox" onclick="onCheckMarker()"
							$datatype="4" />
						<div class="toggle-item"></div>
						<span class="label-style">手持执法终端</span>
					</label>
				</div>
				<div class="visual_chart_text">
					<h1>出行服务+大数据</h1>
					<h2>东海省交通大数据分析平台</h2>
				</div>
				<!-- <div class="visual_chart_text2" style="display: flex;">
					<button id="typeBtn" onclick="typeCheck()"
						style="background-color: #133565; color: #ffffff; border-color:#1380bd;">切换</button>
					<button id="checkD"
						style="display: none;background-color: #133565; color: #ffffff; border-color:#1380bd;"
						onclick="checke2D()">3D</button>
				</div> -->
				<div class="visual_chart" id="main88"></div>
				<div class="visual_chart" id="main8"></div>
				<div class="visual_conBot_bot" id="visualConBotId" style="display: none;cursor:pointer;">
					<div class="visualSssf_left">
						<h3>张三(石家庄支队藁城大队)</h3>
						<a style="width: 100%;display:block; color: rgb(137,189,27);">执法记录仪</a>
						<a style="width: 100%;">所在位置:<span class="active"> 石家庄裕华区慧谷大厦</span></a>
						<a style="width: 45%;">里程:<span class="active"> 4.6km</span></a>
						<a style="width: 45%;">在线时长:<span class="active"> 44:27:20</span></a>
						<a style="width: 45%;">视频数:<span class="active"> 26</span></a>
						<a style="width: 45%;">照片数:<span class="active"> 107</span></a>
					</div>
					<div class="visualSssf_left" style="width: 20%;">
						<h3 style="color: rgb(137,189,27, 0);">123</h3>
						<a style="width: 100%;display:block; color: rgb(137,189,27);">周边资源(方圆10公里)</a>
						<a style="width: 100%;">对讲机:<span class="active"> 8台</span></a>
						<a style="width: 100%;">执法记录仪:<span class="active"> 8台</span></a>
						<a style="width: 100%;">执法车:<span class="active"> 8辆</span></a>
						<a style="width: 100%;">手持终端:<span class="active"> 8台</span></a>
					</div>
					<div class="visualSssf_right" style="display: flex;">
						<div class="flexL">
							<div class="flexC">
								<div class="btnC" style="margin-bottom: 5px; margin-right: 5px;"><img
										style="width: 25px; height: 25px; margin-right: 10px;"
										src="images/btn_1.jpg" />语音通话
								</div>
								<div class="btnC" style="margin-bottom: 5px; margin-left: 5px;"><img
										style="width: 25px; height: 25px; margin-right: 10px;"
										src="images/btn_2.jpg" />视频通话
								</div>
							</div>
							<div class="flexC">
								<div class="btnC" style="margin-top: 5px; margin-right: 5px;"><img
										style="width: 25px; height: 25px; margin-right: 10px;"
										src="images/btn_3.jpg" />轨迹回放
								</div>
								<div class="btnC" style="margin-top: 5px; margin-left: 5px;"><img
										style="width: 25px; height: 25px; margin-right: 10px;"
										src="images/btn_4.jpg" />发送消息
								</div>
							</div>
						</div>
					</div>
					<div class="clear"></div>
				</div>
			</div>
		</div>
		<div class="visual_right" style="width: 30%;">
			<!--			<div class="visual_box">-->
			<!--				<div class="visual_title">-->
			<!--					<span>装备信息</span>-->
			<!--					<img src="images/ksh33.png">-->
			<!--				</div>-->
			<!--				<div class="swiper-container visual_swiper1 visual_chart">-->
			<!--					<div class="swiper-wrapper">-->
			<!--						<div class="zbTotal"> 总数：<span style="color: #33bbd2;">1582</span> 在线率：<span-->
			<!--								style="color: #33bbd2;">94.94%</span></div>-->
			<!--						<div class="zbleft">-->
			<!--							<div class="visualSssf_right_box" id="main5"></div>-->
			<!--							<div class="box_text">-->
			<!--								<li>95.80%</li>-->
			<!--								<li>786 / <span style="color: #ffffff;">820台</span></li>-->
			<!--							</div>-->
			<!--							<div class="visualSssf_right_box" id="main6"></div>-->
			<!--							<div class="box_text2">-->
			<!--								<li>97.90%</li>-->
			<!--								<li>510 / <span style="color: #ffffff;">521台</span></li>-->
			<!--							</div>-->
			<!--							<div class="visualSssf_right_box" id="main7"></div>-->
			<!--							<div class="box_text3">-->
			<!--								<li>87.10%</li>-->
			<!--								<li>131 / <span style="color: #ffffff;">150台</span></li>-->
			<!--							</div>-->
			<!--							<div class="visualSssf_right_box" id="main21"></div>-->
			<!--							<div class="box_text4">-->
			<!--								<li>82.11%</li>-->
			<!--								<li>75 / <span style="color: #ffffff;">91台</span></li>-->
			<!--							</div>-->
			<!--						</div>-->
			<!--					</div>-->
			<!--				</div>-->
			<!--			</div>-->
			<!--			<div class="visual_box" style="padding-left: 20px;">-->
			<!--				<div class="visual_title">-->
			<!--					<span>装备故障</span>-->
			<!--					<img src="images/ksh33.png">-->
			<!--				</div>-->
			<!--				<div class="swiper-container visual_swiper1 visual_chart">-->
			<!--					<div class="swiper-wrapper">-->
			<!--						<div class="zbTotal"> 故障数量: <span style="color: #33bbd2;">5</div>-->
			<!--						<div class="zbright">-->
			<!--							<li class="rightLi">-->
			<!--								<img style="position: relative;top: -8px" src="images/zbicon.png"></icon>-->
			<!--								<div class="bzlist">-->
			<!--									<div style="padding-bottom: 8px">对讲机</div>-->
			<!--									<div><button>待处置</button></div>-->
			<!--								</div>-->
			<!--								<div class="bzinfo">-->
			<!--									<div style="padding-bottom: 8px"><span-->
			<!--											style="color: #4e5667; font-weight: bold;font-size: 15px;">-->
			<!--											装备信息：</span>张三(石家庄支队草城大队)</div>-->
			<!--									<div><span-->
			<!--											style="color: #4e5667; font-weight: bold;font-size: 15px;">上报时间：</span>2024-5-18 15:09:01</div>-->
			<!--								</div>-->
			<!--							</li>-->
			<!--							<li class="rightLi"><img style="position: relative;top: -8px" src="images/zbicon2.png"></icon>-->
			<!--								<div class="bzlist">-->
			<!--									<div style="padding-bottom: 8px">执法记录仪</div>-->
			<!--									<div><button>待处置</button></div>-->
			<!--								</div>-->
			<!--								<div class="bzinfo">-->
			<!--									<div style="padding-bottom: 8px"><span-->
			<!--											style="color: #4e5667; font-weight: bold;font-size: 15px;">装备信息：</span>李四(石家庄支队新乐大队)-->
			<!--									</div>-->
			<!--									<div><span-->
			<!--											style="color: #4e5667; font-weight: bold;font-size: 15px;">上报时间：</span>2024-5-18 15:09:01</div>-->
			<!--								</div>-->
			<!--							</li>-->
			<!--						</div>-->
			<!--					</div>-->
			<!--				</div>-->
			<!--			</div>-->
			<div class="visual_box" style="width: 100%; height: 100%;">
				<div class="visual_title">
					<span>实时视频</span>
					<img src="images/ksh33.png" style="width: auto;">
				</div>
				<div class="swiper-container visual_swiper1 visual_chart">
					<div class="swiper-wrapper" style="text-align: center">
						<div class="jk">
							<div class="box">
								<img class="boxImg" src="images/jk01.png" alt="">
							</div>
							<div class="box">
								<img class="boxImg" src="images/jk02.png" alt="">
							</div>
							<div class="box">
								<img class="boxImg" src="images/jk03.png" alt="">
							</div>
							<div class="box">
								<img class="boxImg" src="images/jk01.png" alt="">
							</div>
							<div class="box">
								<img class="boxImg" src="images/jk02.png" alt="">
							</div>
							<div class="box">
								<img class="boxImg" src="images/jk03.png" alt="">
							</div>
							<div class="box">
								<img class="boxImg" src="images/jk01.png" alt="">
							</div>
							<div class="box">
								<img class="boxImg" src="images/jk02.png" alt="">
							</div>
							<div class="box">
								<img class="boxImg" src="images/jk03.png" alt="">
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="clear"></div>
	</div>
	<script type="text/javascript">
		window._AMapSecurityConfig = {
			securityJsCode: "7c4278a86c9f88d45c66027f72b0fc52",
		};
	</script>

	<!-- <script language="javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=647f3853437e3e2130547387ec934509&plugin=AMap.DistrictSearch"></script>  -->

	<script src="https://webapi.amap.com/loader.js"></script>
	<script src="./js/highway.js"></script>
	<script type="text/javascript">
		$(function () {
			var a = $('.visualSssf_left a')
			for (var i = 0; i < a.length; i++) {
				a[i].index = i;
				a[i].onclick = function () {
					for (var i = 0; i < a.length; i++) {
						a[i].className = ''
					}
					this.className = 'active'
				}
			}

			var sfzcllH = $('.sfzcll_box').height()
			var sfzcllHtwo = sfzcllH - 2
			$('.sfzcll_box').css('line-height', sfzcllH + 'px')
			$('.sfzcll_smallBk>div').css('line-height', sfzcllHtwo + 'px')

			//删除加载动画
			$('#load').fadeOut(1000)
			setTimeout(function () {
				$('#load').remove()
			}
				, 1100);
		})

		let mapType = true
		let is2D = true
		let map

		function checke2D() {
			is2D = true
			typeCheck(false)
			//高亮
			document.getElementById('check2D').classList.add('highBtn')
			document.getElementById('typeBtn').classList.remove('highBtn')
			document.getElementById('check3D').classList.remove('highBtn')
		}
		function checke3D() {
			is2D = false
			typeCheck(false)
			//高亮
			document.getElementById('check3D').classList.add('highBtn')
			document.getElementById('check2D').classList.remove('highBtn')
			document.getElementById('typeBtn').classList.remove('highBtn')



		}

		function typeCheck(mapType) {
			// console.log('click ---', mapType)
			// if (!isCheck) mapType = !mapType
			if (!mapType) {
				$("#checkdjj").prop("checked", true);
				$("#checkjly").prop("checked", true);
				document.getElementById('main8').style.display = 'none'
				document.getElementById('main88').style.display = 'block'
				// document.getElementById('checkD').style.display = 'block'

				// 高德地图
				// var options = {
				// 			subdistrict: 0,
				// 			extensions: 'all',
				// 			level: 'province'
				// 	};
				// 	var district = new AMap.DistrictSearch(options);
				// 	//查询河北省区域
				// 	district.search('河北省', function(status, result) {
				// 			var bounds = result.districtList[0]['boundaries'];
				// 			var mask = [];
				// 			for(var i =0;i<bounds.length;i++){
				// 					mask.push([bounds[i]]);
				// 			}
				// 			//实例化地图
				// 			var map = new AMap.Map('main88', {
				// 					mask: mask,
				// 					zoom: 10,                //设置当前显示级别
				// 					expandZoomRange:true,    //开启显示范围设置
				// 					zooms: [7, 20],          //最小显示级别为7，最大显示级别为20
				// 					// center: [116.43, 39.92],
				// 					viewMode: '3D',          //这里特别注意，设置为3D则其它地区不显示
				// 					zoomEnable: true,        //是否可以缩放地图
				// 					resizeEnable: true,
				// 					mapStyle: "amap://styles/light"
				// 			});
				// 			//添加描边
				// 			for(var i =0;i<bounds.length;i++){
				// 					new AMap.Polyline({
				// 							path:bounds[i],
				// 							strokeColor:'#3078AC',
				// 							strokeWeight:2,
				// 							map:map
				// 					})
				// 			}
				// 	});

				AMapLoader.load({
					key: "647f3853437e3e2130547387ec934509", //申请好的Web端开发者 Key，调用 load 时必填
					version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
				})
					.then((AMap) => {

						let mapOption = {
							// mask: mask,
							zoom: 8,                //设置当前显示级别
							// expandZoomRange:true,    //开启显示范围设置
							// zooms: [7, 20],          //最小显示级别为7，最大显示级别为20
							viewMode: '2D',          //这里特别注意，设置为3D则其它地区不显示
							mapStyle: "amap://styles/darkblue"
						}
						if (!is2D) {
							console.log('3D ---', is2D)
							mapOption = {
								// mask: mask,

								rotateEnable: true,
								pitchEnable: true,
								pitch: 50,
								rotation: -15,

								zoom: 6,                //设置当前显示级别
								viewMode: '3D',          //这里特别注意，设置为3D则其它地区不显示
								mapStyle: "amap://styles/darkblue"
							}
						}
						map = new AMap.Map("main88", mapOption);
						addMarker(map)
						//addHighwayLine(map)
					})
					.catch((e) => {
						console.error(e); //加载错误提示
					});
			} else {
				$("#checkdjj").prop("checked", false);
				$("#checkjly").prop("checked", false);
				document.getElementById('main88').style.display = 'none'
				document.getElementById('main8').style.display = 'block'
				echarts.init(document.getElementById('main8')).setOption(option8);
				document.getElementById('visualConBotId').style.display = 'none'

			}
			//高亮显示
			document.getElementById('typeBtn').classList.add('highBtn')
			document.getElementById('check2D').classList.remove('highBtn')
			document.getElementById('check3D').classList.remove('highBtn')
		}

		$('.listnav').liMarquee({
			direction: 'down',//身上滚动
			runshort: true,//内容不足时不滚动
			scrollamount: 0,//速度
			circular: false
		});

		//交通流量
		// var myChart1 = echarts.init(document.getElementById('main1'));
		// var option11 = {
		// 	tooltip: {
		// 			trigger: 'axis'
		// 	},
		// 	legend: {
		// 			data:['销量']
		// 	},
		// 	grid: {
		// 			left: '3%',
		// 			right: '4%',
		// 			bottom: '3%',
		// 			containLabel: true
		// 	},
		// 	toolbox: {
		// 			feature: {
		// 					saveAsImage: {}
		// 			}
		// 	},
		// 	xAxis: {
		// 			type: 'category',
		// 			// boundaryGap: false,
		// 			data: ["沧州",
		//         "唐山",
		//         "衡水",
		//         "邢台",
		//         "雄安",
		//         "邯郸",
		// 				"石家庄",
		//         "承德",
		//         "张家口",
		//         "保定",
		//         "廊坊",
		//         "秦皇岛"]
		// 	},
		// 	yAxis: {
		// 			type: 'value'
		// 	},
		// 	series: [
		// 			{
		// 					name:'装备数量',
		// 					type:'line',
		// 					data:[150, 230, 224, 218, 135, 147, 150, 230, 224, 218, 135, 147]
		// 			}
		// 	],
		// 	axisLabel: {
		// 		show: true,
		// 		interval: '0',
		// 	}
		// }
		//   myChart1.setOption({
		//   xAxis: {
		//     data: ['A', 'B', 'C', 'D', 'E']
		//   },
		//   yAxis: {},
		//   series: [
		//     {
		//       data: [10, 22, 28, 23, 19],
		//       type: 'line',
		//       areaStyle: {}
		//     },
		//     {
		//       data: [25, 14, 23, 35, 10],
		//       type: 'line',
		//       areaStyle: {
		//         color: '#ff0',
		//         opacity: 0.5
		//       }
		//     }
		//   ]
		// });

		var rightTime = document.getElementById('rightTime')
		setInterval(() => {
			if (rightTime) rightTime.innerHTML = moment().format('YYYY/MM/DD hh:mm:ss')
		}, 1000);
		// //执法装备
		var dataList = [
			"石家庄支队", "承德支队", "张家口支队", "保定支队", "廊坊支队", "秦皇岛支队", "沧州支队",
			"唐山支队", "衡水支队", "邢台支队", "雄安支队", "邯郸支队",
		]
		var myChart2 = echarts.init(document.getElementById('main2'));
		myChart2.setOption(option2);
		//执法装备轮播
		let currentIndex2 = -1; // 初始值为-1，表示未开始轮播
		let timer2 = null;

		// 切换tooltip
		function switchTooltip2(myChart) {
			// 取消之前高亮的图形
			myChart2.dispatchAction({
				type: 'downplay',
				seriesIndex: 0,
				dataIndex: currentIndex2,
			});
			currentIndex2 = (currentIndex2 + 1) % option2.series[0].data.length;
			// 高亮当前图形
			myChart2.dispatchAction({
				type: 'highlight',
				seriesIndex: 0,
				dataIndex: currentIndex2,
			});
			// 显示tooltip
			myChart2.dispatchAction({
				type: 'showTip',
				seriesIndex: 0,
				dataIndex: currentIndex2,
			});
		}

		function startTooltipLoop2(myChart) {
			timer2 = setInterval(() => switchTooltip2(myChart2), 2000);
		}

		function closeSwitchTooltip2() {
			clearInterval(timer2);
			timer2 = undefined;

		}

		// 鼠标悬浮，停止轮播
		myChart2.on('mousemove', function () {
			closeSwitchTooltip2();
		});

		// 鼠标离开，继续轮播
		myChart2.on('mouseout', function () {
			startTooltipLoop2(myChart2);
		});

		startTooltipLoop2(myChart2); //开启轮播

		//本月发生事件
		// var myChart3 = echarts.init(document.getElementById('main3'));
		//   myChart3.setOption(option3);
		//   var myChart31 = echarts.init(document.getElementById('main31'));
		//   myChart31.setOption(option31);
		//   var mySwiper1 = new Swiper('.visual_swiper1', {
		// 	autoplay: true,//可选选项，自动滑动
		// 	speed:800,//可选选项，滑动速度
		// 	autoplay: {
		// 	    delay: 5000,//1秒切换一次
		// 	  },
		// })
		//今日执勤
		// var myChart4 = echarts.init(document.getElementById('main4'));
		// myChart4.setOption(option4);
		// //轮播
		// 	let currentIndex = -1; // 初始值为-1，表示未开始轮播
		// 	let timer = null;
		// 	// 切换tooltip
		// 	function switchTooltip(myChart) {
		// 		// 取消之前高亮的图形
		// 		myChart4.dispatchAction({
		// 			type: 'downplay',
		// 			seriesIndex: 0,
		// 			dataIndex: currentIndex,
		// 		});
		// 		currentIndex = (currentIndex + 1) % option4.series[0].data.length;
		// 		// 高亮当前图形
		// 		myChart4.dispatchAction({
		// 			type: 'highlight',
		// 			seriesIndex: 0,
		// 			dataIndex: currentIndex,
		// 		});
		// 		// 显示tooltip
		// 		myChart4.dispatchAction({
		// 			type: 'showTip',
		// 			seriesIndex: 0,
		// 			dataIndex: currentIndex,
		// 		});
		// 	}
		//
		// 	function startTooltipLoop(myChart) {
		// 		timer = setInterval(() => switchTooltip(myChart), 2000);
		// 	}
		//
		// 	function closeSwitchTooltip() {
		// 		clearInterval(timer);
		// 		timer = undefined;
		//
		// 	}
		//
		// 	// 鼠标悬浮，停止轮播
		// 	myChart4.on('mousemove', function () {
		// 		closeSwitchTooltip();
		// 	});
		//
		// 	// 鼠标离开，继续轮播
		// 	myChart4.on('mouseout', function () {
		// 		startTooltipLoop(myChart4);
		// 	});
		//
		// 	startTooltipLoop(myChart4); //开启轮播
		// var myChart41 = echarts.init(document.getElementById('main41'));
		// myChart41.setOption(option41);
		// 	//轮播
		// 	let currentIndex41 = -1; // 初始值为-1，表示未开始轮播
		// 	let timer41 = null;
		// 	// 切换tooltip
		// 	function switchTooltip41(myChart) {
		// 		// 取消之前高亮的图形
		// 		myChart41.dispatchAction({
		// 			type: 'downplay',
		// 			seriesIndex: 0,
		// 			dataIndex: currentIndex41,
		// 		});
		// 		currentIndex41 = (currentIndex41 + 1) % option41.series[0].data.length;
		// 		// 高亮当前图形
		// 		myChart41.dispatchAction({
		// 			type: 'highlight',
		// 			seriesIndex: 0,
		// 			dataIndex: currentIndex41,
		// 		});
		// 		// 显示tooltip
		// 		myChart41.dispatchAction({
		// 			type: 'showTip',
		// 			seriesIndex: 0,
		// 			dataIndex: currentIndex41,
		// 		});
		// 	}
		//
		// 	function startTooltipLoop41(myChart41) {
		// 		timer41 = setInterval(() => switchTooltip41(myChart41), 2000);
		// 	}
		//
		// 	function closeSwitchTooltip41() {
		// 		clearInterval(timer41);
		// 		timer41 = undefined;
		//
		// 	}
		//
		// 	// 鼠标悬浮，停止轮播
		// 	myChart41.on('mousemove', function () {
		// 		closeSwitchTooltip41();
		// 	});
		//
		// 	// 鼠标离开，继续轮播
		// 	myChart41.on('mouseout', function () {
		// 		startTooltipLoop41(myChart41);
		// 	});
		//
		// 	startTooltipLoop41(myChart41); //开启轮播

		var mySwiper2 = new Swiper('.visual_swiper2', {
			autoplay: true,//可选选项，自动滑动
			direction: 'vertical',//可选选项，滑动方向
			speed: 2000,//可选选项，滑动速度
		})
		//今日实时收费
		var myChart5 = echarts.init(document.getElementById('main5'));
		myChart5.setOption(option5);
		var myChart6 = echarts.init(document.getElementById('main6'));
		myChart6.setOption(option6);
		var myChart7 = echarts.init(document.getElementById('main7'));
		myChart7.setOption(option7);
		var myChart21 = echarts.init(document.getElementById('main21'));
		myChart21.setOption(option21);
		//中间地图
		var myChart8 = echarts.init(document.getElementById('main8'));
		myChart8.setOption(option8);
		//执法设备
		var myChart9 = echarts.init(document.getElementById('main9'));
		myChart9.setOption(option9);
		//执法装备轮播
		let currentIndex9 = -1; // 初始值为-1，表示未开始轮播
		let timer9 = null;

		// 切换tooltip
		function switchTooltip9(myChart) {
			// 取消之前高亮的图形
			myChart9.dispatchAction({
				type: 'downplay',
				seriesIndex: 0,
				dataIndex: currentIndex9,
			});
			currentIndex9 = (currentIndex9 + 1) % option9.series[0].data.length;
			// 高亮当前图形
			myChart9.dispatchAction({
				type: 'highlight',
				seriesIndex: 0,
				dataIndex: currentIndex9,
			});
			// 显示tooltip
			myChart9.dispatchAction({
				type: 'showTip',
				seriesIndex: 0,
				dataIndex: currentIndex9,
			});
		}

		function startTooltipLoop9(myChart9) {
			timer9 = setInterval(() => switchTooltip9(myChart9), 2000);
		}

		function closeSwitchTooltip9() {
			clearInterval(timer9);
			timer9 = undefined;

		}

		// 鼠标悬浮，停止轮播
		myChart9.on('mousemove', function () {
			closeSwitchTooltip9();
		});

		// 鼠标离开，继续轮播
		myChart9.on('mouseout', function () {
			startTooltipLoop9(myChart9);
		});

		startTooltipLoop9(myChart9); //开启轮播


		// 案件数量
		// var myChart10 = echarts.init(document.getElementById('main10'));
		// myChart10.setOption(option10);
		// //案件数量轮播
		// 	let currentIndex10 = -1; // 初始值为-1，表示未开始轮播
		// 	let timer10 = null;
		// 	// 切换tooltip
		// 	function switchTooltip10(myChart) {
		// 		// 取消之前高亮的图形
		// 		myChart10.dispatchAction({
		// 			type: 'downplay',
		// 			seriesIndex: 0,
		// 			dataIndex: currentIndex10,
		// 		});
		// 		currentIndex10 = (currentIndex10 + 1) % option10.series[0].data.length;
		// 		// 高亮当前图形
		// 		myChart10.dispatchAction({
		// 			type: 'highlight',
		// 			seriesIndex: 0,
		// 			dataIndex: currentIndex10,
		// 		});
		// 		// 显示tooltip
		// 		myChart10.dispatchAction({
		// 			type: 'showTip',
		// 			seriesIndex: 0,
		// 			dataIndex: currentIndex10,
		// 		});
		// 	}
		//
		// 	function startTooltipLoop10(myChart10) {
		// 		timer10 = setInterval(() => switchTooltip10(myChart10), 2000);
		// 	}
		//
		// 	function closeSwitchTooltip10() {
		// 		clearInterval(timer10);
		// 		timer10 = undefined;
		//
		// 	}
		//
		// 	// 鼠标悬浮，停止轮播
		// 	myChart10.on('mousemove', function () {
		// 		closeSwitchTooltip10();
		// 	});
		//
		// 	// 鼠标离开，继续轮播
		// 	myChart10.on('mouseout', function () {
		// 		startTooltipLoop10(myChart10);
		// 	});
		//
		// 	startTooltipLoop10(myChart10); //开启轮播
	</script>
</body>

</html>